<template>
	<uni-popup ref="popupRef" :type="type" :border-radius="borderRadius">
		<uni-popup-dialog :mode="dialogMode" :title="title" :duration="duration" :before-close="beforeClose"
			@close="handleClose" @confirm="handleConfirm">
			<template #default>
				<view class="uni-form-item uni-column">
					<view class="input-wrapper">
						<uni-easyinput class="uni-input" :clearable="false" type="password" :focus="autoFocus"
							:placeholder="placeholder" :placeholder-style="placeholderStyle" v-model="localPassword" />
					</view>
				</view>
			</template>
		</uni-popup-dialog>
	</uni-popup>
</template>

<script>
	import {
		md5Encrypt,
	} from '@/static/script/security.js'
	export default {
		name: 'PasswordPopup',
		props: {
			// 对话框类型
			type: {
				type: String,
				default: 'dialog'
			},
			// 圆角半径
			borderRadius: {
				type: [String, Number],
				default: '20upx'
			},
			// 对话框模式
			dialogMode: {
				type: String,
				default: 'input'
			},
			// 标题
			title: {
				type: String,
				default: '输入密码'
			},
			// 动画时长
			duration: {
				type: Number,
				default: 2000
			},
			// 是否在关闭前触发回调
			beforeClose: {
				type: Boolean,
				default: true
			},
			// 占位符文本
			placeholder: {
				type: String,
				default: '请输入密码'
			},
			// 占位符样式
			placeholderStyle: {
				type: String,
				default: '#999999'
			},
			// 自动聚焦
			autoFocus: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				localPassword: ''
			};
		},
		computed: {
			password() {
				return this.$store.getters.addressInfo.password
			}
		},
		methods: {
			open() {
				this.$refs.popupRef.open();
			},
			close() {
				this.$refs.popupRef.close();
			},
			handleClose() {
				this.localPassword = ''
				this.$emit('close');
			},
			handleConfirm() {
				if (!this.localPassword) {
					return this.error("请输入密码")
				}
				const encryptedPassword = md5Encrypt(this.localPassword);
				if (encryptedPassword != this.password) {
					return this.error("密码有误")
				}
				this.localPassword = ''
				this.$emit('confirm', this.localPassword);
			},
			error(tip) {
				uni.showToast({
					title: tip,
					position: "bottom",
					icon: "none",
					duration: 2000,
				});
			},
		}
	};
</script>

<style scoped lang="scss">
	/* 你可以在这里添加或修改样式 */
	:deep(.uni-popup__info) {
		color: #333;
	}

	:deep(.uni-popup-dialog) {
		background-color: #F5F6F8;

		.uni-dialog-title {
			.uni-popup__info {
				color: #3D3D3D;

				.uni-dialog-title-text {
					font-size: 36upx;
					font-weight: 400;
				}

			}
		}

		.uni-dialog-button-group {
			border-top-color: #D8D8D8;
			border-top-width: 1upx;

			.uni-dialog-button-text {
				color: #368521;
			}

			.uni-border-left {
				border-left-color: #D8D8D8;
				border-left-width: 1upx;

				.uni-button-color {
					color: #D56B6F;
					// font-size: 28upx;
				}
			}
		}
	}

	.uni-form-item {
		width: 100%;

		.input-wrapper {
			display: flex;
			background: #FFFFFF;
			align-items: center;
			border-radius: 10upx;

			.uni-input {
				flex: 1;
			}

			.icon {
				width: 32upx;
				height: 32upx;
			}
		}
	}
</style>